<%@page import="com.fasterxml.jackson.annotation.JsonInclude.Include"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script type="text/javascript" src="${ctx}/js/lib.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.SuperSlide.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.scrollLoading.js"></script>
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    <title>软装到家</title>
</head>
<body>
 <%@include file="../common_head.jsp" %>
 <%@include file="../common_nav.jsp" %>
<div class="w-1200 margin-0-auto" id="ogmall_left">
	<div class="blank10"></div>
	<div class="ogmall_lbrz_title">
        <h1>设计方案</h1><h2>Design Plan</h2>
    </div>
    <div class="ogmall_customer">
        <div class="choice">
            <div class="li">
                <b>城市：</b>
                <ul id="choosen_city">
                    <c:choose>
	            	<c:when test="${cityId == null }">
	            		<li><a onclick="selectAll(this)" class="on">不限</a></li>
	            	</c:when>
	            	<c:otherwise>
	            		<li><a onclick="selectAll(this)">不限</a></li>
	            	</c:otherwise>
            		</c:choose>
            		
            		<c:forEach items="${citys }" var="c" varStatus="cs">
            		<li data-obj-id="${c.id }" data-obj-name="${c.name }">
            			<c:choose>
	            		<c:when test="${cityId != null and cityId == c.id }">
		            		<a href="#" class="on">${c.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a href="#">${c.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
            	
                    <!-- <li><a href="#" class="on">不限</a></li><li><a href="#">北京</a></li><li><a href="#">上海</a></li><li><a href="#">广州</a></li><li><a href="#">长沙</a></li><li><a href="#">深圳</a></li> -->
                </ul>
            </div>
            <div class="li">
                <b>区域：</b>
                <ul id="choosen_district">
                	<c:choose>
	            	<c:when test="${districtId == null}">
	            		<li><a onclick="selectAll(this)" class="on">不限</a></li>
	            	</c:when>
	            	<c:otherwise>
	            		<li><a onclick="selectAll(this)" href="#">不限</a></li>
	            	</c:otherwise>
            	</c:choose>
            	
            	<c:forEach items="${districts }" var="d" varStatus="ds">
            		<li data-obj-id="${d.id }" data-obj-name="${d.name }">
            			<c:choose>
            			<c:when test="${districtId != null and districtId == d.id }">
		            		<a onclick="selectAll(this)" class="on">${d.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a onclick="selectAll(this)">${d.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
                    <!-- <li><a href="#" class="on">不限</a></li><li><a href="#">雨花区</a></li><li><a href="#">芙蓉区</a></li><li><a href="#">开福区</a></li><li><a href="#">岳麓区</a></li><li><a href="#">天心区</a></li><li><a href="#">望城</a></li> -->
                </ul>
            </div>
            <div class="li">
                <b>楼盘：</b>
                <ul id="choosen_community">
                    <c:choose>
	            	<c:when test="${communityId == null}">
	            		<li><a onclick="selectAll(this)" class="on">不限</a></li>
	            	</c:when>
	            	<c:otherwise>
	            		<li><a onclick="selectAll(this)">不限</a></li>
	            	</c:otherwise>
            	</c:choose>
            	<c:forEach items="${communities }" var="c" varStatus="cs">
            		<li data-obj-id="${c.id }" data-obj-name="${c.name }">
            			<c:choose>
            			<c:when test="${communityId != null and communityId == c.id }">
		            		<a onclick="selectAll(this)" class="on">${c.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a onclick="selectAll(this)">${c.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
                    <!-- <li><a href="#" class="on">不限</a></li><li><a href="#">松桂园</a></li><li><a href="#">恒大名都</a></li> -->
                </ul>
            </div>
            <div class="li">
                <b>风格：</b>
                <ul id="choosen_houseType">
                <c:choose>
	            	<c:when test="${houseStyleId == null}">
	            		<li><a onclick="selectAll(this)" class="on">不限</a></li>
	            	</c:when>
	            	<c:otherwise>
	            		<li><a onclick="selectAll(this)">不限</a></li>
	            	</c:otherwise>
            	</c:choose>
            	
            	<c:forEach items="${houseStyles }" var="hs" varStatus="hss">
            		<li data-obj-id="${hs.id }" data-obj-name="${hs.name }">
            			<c:choose>
            			<c:when test="${houseStyleId != null and houseStyleId == hs.id }">
		            		<a href="#" class="on">${hs.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a href="#">${hs.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
                    <!-- <li><a href="#" class="on">不限</a></li><li><a href="#">欧式</a></li><li><a href="#">法式</a></li><li><a href="#">美式</a></li> -->
                </ul>
            </div>
            <div class="li">
                <b>面积：</b>
                <ul id="choosen_area">
                	<c:choose>
                		<c:when test="${area == null}">
                			<li><a href="#" class="on" onclick="selectAll(this)">不限</a></li>
                		</c:when>
                		<c:otherwise>
                			<li><a href="#" onclick="selectAll(this)">不限</a></li>
                		</c:otherwise>
                	</c:choose>
                    <c:choose>
                		<c:when test="${area != null and area==2}">
                			<li data-obj-id="2"><a href="#" class="on">小于100㎡</a></li>
                		</c:when>
                		<c:otherwise>
                			<li data-obj-id="2"><a href="#">小于100㎡</a></li>
                		</c:otherwise>
                	</c:choose>
                    <c:choose>
                		<c:when test="${area != null and area==3}">
                			<li data-obj-id="3"><a href="#" class="on">100㎡-200㎡</a></li>
                		</c:when>
                		<c:otherwise>
                			<li data-obj-id="3"><a href="#">100㎡-200㎡</a></li>
                		</c:otherwise>
                	</c:choose>
                    <c:choose>
                		<c:when test="${area != null and area==4}">
                			<li data-obj-id="4"><a href="#" class="on">200㎡-300㎡</a></li>
                		</c:when>
                		<c:otherwise>
                			<li data-obj-id="4"><a href="#">200㎡-300㎡</a></li>
                		</c:otherwise>
                	</c:choose>
                </ul>
            </div>
            <div class="li">
                <b>户型：</b>
                <ul id="choosen_communityHouseType">
                	<c:choose>
	            	<c:when test="${houseTypeId == null}">
	            		<li><a onclick="selectAll(this)" class="on">不限</a></li>
	            	</c:when>
	            	<c:otherwise>
	            		<li><a onclick="selectAll(this)">不限</a></li>
	            	</c:otherwise>
            	</c:choose>
            	<c:forEach items="${houseTypes }" var="h" varStatus="hs">
            		<li data-obj-id="${h.id }" data-obj-name="${h.name }">
            			<c:choose>
            			<c:when test="${houseTypeId != null and houseTypeId == h.id }">
		            		<a class="on">${h.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a>${h.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            		</c:forEach>
                   <!--  <li><a href="#" class="on">不限</a></li><li><a href="#">一室一厅</a></li><li><a href="#">二室一厅</a></li><li><a href="#">二室二厅</a></li><li><a href="#">三室一厅</a></li><li><a href="#">四室一厅</a></li> -->
                </ul>
            </div>
        </div>
        <div class="customer scrollLoading1">
            <div class="hd">
                <ul id="choosen_orderType">
                	<c:choose>
                		<c:when test="${orderType==null }">
                			<li class="on">默认</li>
                		</c:when>
                		<c:otherwise>
                			<li>默认</li>
                		</c:otherwise>
                	</c:choose>
                	<c:choose>
                		<c:when test="${orderType==1 }">
                			<li  data-obj-id="1" class="on">价格</li>
                		</c:when>
                		<c:otherwise>
                			<li data-obj-id="1">价格</li>
                		</c:otherwise>
                	</c:choose>
                	<c:choose>
                		<c:when test="${orderType==2 }">
                			<li class="on" data-obj-id="2">热度</li>
                		</c:when>
                		<c:otherwise>
                			<li data-obj-id="2">热度</li>
                		</c:otherwise>
                	</c:choose>
                </ul>                        
            </div> 
            <div class="bd">
            	<ul>
                	<%-- <li><a href="#"><img data-original="${ctx}/img/3.jpg"><div class="t"><span>南昌九龙湖花园</span><em>4室2厅&nbsp;&nbsp;&nbsp;现代欧式&nbsp;&nbsp;&nbsp;150㎡</em></div></a></li>
                    <li><a href="#"><img data-original="${ctx}/img/3.jpg"><div class="t"><span>南昌九龙湖花园</span><em>4室2厅&nbsp;&nbsp;&nbsp;现代欧式&nbsp;&nbsp;&nbsp;150㎡</em></div></a></li> --%>
                	<c:forEach items="${designs }" var="ds">
                		<li>
                			<a href="${ctx }/design/detailNew?id=${ds.id}">
                				<img data-original="${ds.headImage }" title="${ds.title }">
                			</a>
                				<div class="t">
                					<a href="${ctx }/designer/detail?designerId=${ds.designer.id}">
                					<em style="margin-right:30px;"><img  src="${ds.designer.user.headImage }" style=" width:46px; height:46px; margin:9px 15px 0 30px; float:left">${ds.designer.user.realName}</em>
                					</a>
                					
                					<a href="${ctx }/design/detailNew?id=${ds.id}" title="${ds.title }">
	                				<span> ${ds.title }</span>
	                				<em>${ds.communityHouseType.name }&nbsp;&nbsp;&nbsp;${ds.houseStyle.name }&nbsp;&nbsp;&nbsp;${ds.area }㎡</em>
	                				</a>
                				</div>
                			
                		</li>
                	</c:forEach>
                </ul>
                <!-- <ul>2</ul>
                <ul>3</ul> -->
            </div>
        	<!-- <div class="ogmall_page"><a href="#">上一页</a><span>1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><span>...</span><a href="#">下一页</a></div> -->
        </div> 
    </div>
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<%@include file="../page4design.jsp"%>
<%@include file="../foot.jsp" %>
<style>
.ogmall_left_nav{top:200px !important}
</style>
<%@include file="../left_nav.jsp" %>

<script type="text/javascript" src="${ctx}/js/plugins.js"></script>
<script type="text/javascript" src="${ctx}/js/modules.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript">
	jQuery(".customer").slide({triggerEvent:true,trigger:"click"});
	$(function(){
		var scrollDir = 'down',lastScrollTop = $(window).scrollTop();
		var viewHeight = $(window).height(); //获取视窗高度
		$(window).scroll(function(event){
			viewHeight = $(window).height();
			var ling = $(window).scrollTop();
			var ct = ling - lastScrollTop;
			if(ling > ($('#ogmall_left').offset().top-viewHeight)){
				$('#ogmall_left_nav').show();
				$('#ogmall_left_nav').removeClass('ogmall_left_nav');
				
				if($('#ogmall_left').offset().top>ling){
					var top = $('#ogmall_left').offset().top-ling+20;
					if(top <20){
						top =20;
					}
					$('#ogmall_left_nav').css({top:top+'px'})
				}else{
					$('#ogmall_left_nav').css({top:20+'px'})
				}
				
			}else{
				$('#ogmall_left_nav').hide();
				$('#ogmall_left_nav').addClass('ogmall_left_nav');
				fixed = false;
			}
			lastScrollTop = ling;
		})
	})	
	$(function(){
		var a =$("#ogmall_left_nav li:gt(0)");
			a.hide();
		$(".f0").click(function(){
			if(a.is(':visible')){
				 a.slideUp('fast');
				 $(this).removeClass('f1');
			}else{
				a.slideDown('fast').show();	
				$(this).addClass('f1');
			}			
		});
	});
	
	function gotoPage(pageNum,cityId,districtId,communityId,houseStyleId,area,houseTypeId,orderType) {   //跳转到指定页面
		location='${ctx}/design/indexNew?page='+pageNum
		+'&cityId='+cityId+'&districtId='+districtId
		+'&communityId='+communityId+'&houseTypeId='+houseTypeId
		+'&houseStyleId='+houseStyleId+'&area='+area+'&orderType='+orderType;
	}
	
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
        $('#choosen_city li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_district li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_community li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_communityHouseType li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_houseType li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_area li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_orderType li').on('click',function() {
        	changeOrder(this);
        	gotoWhenSelected();
        });
        setDefaultOrderType();
        setNav(3);
    }); 
    
    function setDefaultOrderType(){
    	var orderType='${orderType}';
    	if(null!=orderType&&""!=orderType){
    		$('#choosen_orderType li').each(function(){
    			if($(this).data().objId==orderType){
    				changeOrder(this);
    			}
    		});
    	}
    }
    
    function selectAll(obj) {  //选择全部
    	var span = $(obj).parent();
    	var lis = $(span).next('ul').find('li a');
    	lis.removeClass('on');
    	gotoWhenSelected();
    }
    
    function gotoWhenSelected() {   //查找选择
    	var citys = $('#choosen_city').find('.on');
    	var choosenCity = '';
    	if(citys.length >0 &&citys.html()!='不限') {
    		var parentLi = $(citys[0]).parents('li');
    		var data = $(parentLi).data();
    		choosenCity = data.objId;
    	}
    	
    	var districts = $('#choosen_district').find('.on');
    	var choosen_district = '';
    	if(districts.length > 0 && districts.html()!='不限') {
    		var parentLi = $(districts[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_district = data.objId;
    	}
    	
    	var communities = $('#choosen_community').find('.on');
    	var choosen_community = '';
    	if(communities.length > 0 && communities.html()!='不限') {
    		var parentLi = $(communities[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_community = data.objId;
    	}
    	
    	var houseTypes = $('#choosen_communityHouseType').find('.on');
    	var choosen_houseType = '';
    	if(houseTypes.length > 0 && houseTypes.html()!='不限') {
    		var parentLi = $(houseTypes[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_houseType = data.objId;
    	}
    	
    	var houseStyles = $('#choosen_houseType').find('.on');
    	var choosen_houseStyle = '';
    	if(houseStyles.length > 0 && houseStyles.html()!='不限') {
    		var parentLi = $(houseStyles[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_houseStyle = data.objId;
    	}
    	
    	var houseArea = $('#choosen_area').find('.on');
    	var choosen_houseArea = '';
    	if(houseArea.length > 0 && houseArea.html()!='不限') {
    		var parentLi = $(houseArea[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_houseArea = data.objId;
    	}
    	
    	var orderType = $('#choosen_orderType').find('.on');
    	var choosen_orderType = '';
    	if(orderType.length > 0 && orderType.html()!='默认') {
    		var data = $(orderType[0]).data();
    		choosen_orderType = data.objId;
    	}
    	
    	
    	location = '${ctx}/design/indexNew?cityId='+choosenCity
    	+"&districtId="+choosen_district+"&communityId="
    	+choosen_community+"&houseTypeId="+choosen_houseType
    	+"&houseStyleId="+choosen_houseStyle+"&area="
    	+choosen_houseArea+"&orderType="+choosen_orderType;	
    }
    
    function changeChoose(obj) {
    	var lis = $(obj).parents('ul').find('li a');
    	lis.removeClass("on");
    	$(obj).find('a').addClass('on');
    }

	function changeOrder(obj){
		var lis = $(obj).parents('ul').find('li');
    	lis.removeClass("on");
    	$(obj).addClass('on');
	}
	
    $('#provinceId').change(function() {
    	$.ajax({
    		url: "${ctx}/province/findArea",
    		data: {
    			provinceId: $('#provinceId').val()
    		},
    		dataType: "json",
    		success: function(data) {
    			$('#cityId').html('');
    			$('#cityId').append('<option value="">城市</option>');
				for (var i = 0; i < data.length; i++) {
					var obj = data[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#cityId').append(option);	
				}
    		}
    		
    	});
    });
    
    $('#cityId').change(function() {
    	$.ajax({
    		url: "${ctx}/design/findCommunityByCity",
    		data: {
    			cityId: $('#cityId').val()
    		},
    		dataType: "json",
    		success: function(data) {
    			$('#communityId').html('');
    			$('#communityId').append('<option value="">楼盘</option>');
				for (var i = 0; i < data.length; i++) {
					var obj = data[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#communityId').append(option);	
				}
    		}
    		
    	});	
    });
    
</script>
</body>
</html>